<template>
    <!-- // 活动来源div -->
    <div style="width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;"
        v-show="seletStatus">
        <div class="scroll-container">
            <span v-for="(item, index) in listAct" :key="index" :value="item" @click="btnSelect(item)">{{ item }}</span>
        </div>
    </div>
    <!-- // 服务时间div -->
    <div style="width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;"
        v-show="timeStatus">
        <div class="scroll-container">
            <span v-for="(item, index) in listTime" :key="index" :value="item" @click="btnServerTime(item)">{{ item
                }}</span>
        </div>
    </div>
    <!-- // 服务时长div -->
    <div style="width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;"
        v-show="longStatus">
        <div class="scroll-container">
            <span v-for="(item, index) in listLong" :key="index" :value="item" @click="btnServerLong(item)">{{ item
            }}小时</span>
        </div>
    </div>

    <div class="outDiv" v-show="bodyStatus">
        <div style="position: absolute;left: 2%;">
            <label @click="btnIndex()">
                < 返回 </label>
        </div>
        <div class="body">
            <table>
                <tbody>
                    <tr>
                        <td>活动来源</td>
                        <td><span :class="{ 'serverList': fromStatue }">{{ actFrom }}</span></td>
                        <td><span @click.stop="btnFrom">></span></td>
                    </tr>
                    <tr>
                        <td>服务时间</td>
                        <td><span :class="{ 'serverList': serverTimeStatue }">{{ actTime }}</span></td>
                        <td><span @click.stop="btnTime">></span></td>
                    </tr>
                    <tr>
                        <td>服务时长</td>
                        <td><span :class="{ 'serverList': serverLongStatue }">{{ actLong }}</span></td>
                        <td><span @click.stop="btnLong">></span></td>
                    </tr>
                    <tr>
                        <td colspan="3">服务内容</td>
                    </tr>
                    <tr>
                        <td colspan="3"><textarea name="" id="" placeholder="请对服务内容进行简要描述"
                                v-model="actContent"></textarea></td>
                    </tr>
                    <tr style="height: 85px;">
                        <td colspan="3">
                            <!-- <input type="file" value="添加图片0/2" style="color: transparent;"> -->
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="footer">
                <input type="button" value="提交" @click="btnPush()">
            </div>
        </div>
    </div>
</template>
<script setup>
// == 引入相关依赖-开始 ==
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// == 引入相关依赖-结束 ==

// == 定义变量实例-开始 ==

let router = useRouter()
let bodyStatus = ref(true)
// 定义活动来源div初始状态为不显示
let seletStatus = ref(false)
// 定义服务时长div初始状态
let longStatus = ref(false)
// 定义服务时间div初始状态
let timeStatus = ref(false)
// 定义提示词
let actFrom = ref('请选择活动来源')
let actTime = ref('请选择活动时间')
let actLong = ref('请选择活动时长')
let actContent = ref('')
// 活动来源 服务时长 服务时间 共同类名默认值
let fromStatue = ref(false)
let serverTimeStatue = ref(false)
let serverLongStatue = ref(false)

// 活动列表数据组
let listAct = ref([
    '软件工程学院', '登高社区', '操场', '楚河汉街', '中山公园', '龙津湖公园', '大匠堂', '团结里', '龙岩火车站'
])
//服务市场数据组
let listLong = ref([
    0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5
])
// 服务时间数据组
let listTime = ref([
    '2022-05-20',
    '2020-05-30',
    '2000-04-20',
    '2021-03-11',
    '2025-05-02',
    '2024-05-10',
    '2014-06-20'
])
// == 定义变量实例-结束 ==

// == 动作函数-开始 ==
function btnIndex() {
    // 返回首页
    router.push('/index')
}
// 提交按钮
function btnPush() {
    let tmpLong = actLong.value.split('小时')[0] // 获取活动时长
    let tmpObj = {
        parent: actFrom.value,
        servertime: actTime.value,
        serverlong: tmpLong,
        servercontent: actContent.value,
        name: localStorage.getItem('userName') // 获取用户名
    }
    fetch('http://localhost:5000/uservol', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }, body: JSON.stringify(tmpObj)
    }).then(res => {
        if (res.ok) {
            alert('提交成功')
            router.push('/index')
        } else {
            alert('提交失败，请稍后重试')
        }
    })
} // 保存数据并回到首页
// =======================
/**
 * 修改对应的div的状态
 * 将主体部分隐藏
 */
// 活动来源
function btnFrom() {
    // 修改活动来源div初始状态 并显示
    seletStatus.value = true
    // 修改body初始状态
    bodyStatus.value = false
}
// 活动时长
function btnLong() {
    longStatus.value = true
    bodyStatus.value = false
}
// 活动时间
function btnTime() {
    timeStatus.value = true
    bodyStatus.value = false
}
// =========================
function btnSelect(eve) {
    actFrom.value = eve
    fromStatue.value = true
    seletStatus.value = !seletStatus.value
    bodyStatus.value = !bodyStatus.value

} // 获取用户选择的活动来源并显示在页面上

function btnServerLong(eve) {
    actLong.value = `${eve}小时`
    serverLongStatue.value = true
    longStatus.value = !longStatus.value
    bodyStatus.value = !bodyStatus.value
}

function btnServerTime(eve) {
    actTime.value = eve
    serverTimeStatue.value = true
    timeStatus.value = !timeStatus.value
    bodyStatus.value = !bodyStatus.value
}
// == 动作函数-结束 ==

</script>
<style scoped>
/* 垂直滑动效果-开始 */
.scroll-container {
    width: 300px;
    height: 300px;
    background-color: darkcyan;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.scroll-container span {
    width: 100%;
    height: 100px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    scroll-snap-align: start;
    transition: transform 0.2s;
    cursor: pointer;
}



.scroll-container span:hover {
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(1.07);
}

.scroll-container::-webkit-scrollbar {
    width: 6px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

/* 垂直滑动效果-结束 */

.serverList {
    color: black;
}

.footer {
    margin-top: 5%;
    display: flex;
    width: 100%;
    height: 70%;
    justify-content: center;
}

label {
    width: 100%;
    font-size: 16px;
    color: #1b96f0;
}


.footer input {
    font-family: cursive;
    width: 80%;
    line-height: 30px;
    border: none;
    background-color: darkgray;
}

table {
    font-family: cursive;
    width: 100%;
    line-height: 40px;
    margin-top: 4%;
}

table span {
    color: gray;
}

.outDiv {
    width: 99%;
    height: 100%;
    background-color: color(display-p3 0.5 0.5 0.5 / 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
}

textarea {
    width: 100%;
    height: 90px;
    resize: none;
    outline: none;
    border: none;
    font-family: cursive;

}

tr,
td {
    border-bottom: 1px dashed gray;
}

.body {
    width: 100%;
    height: 48%;
    background-color: #fff;
}
</style>